<script setup>
	import {
		ref
	} from 'vue'
	import {
		onShow,
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	onLoad((options) => {
		getList(options.keywords)
	})
	const movieList = ref([])
	const page = ref(0);
	const loadModal = ref(true)
	const getList = async (keywords) => {
		if (movieList.value.length == [] || !movieList.value) {
			loadModal.value = true;
		}
		const db = uniCloud.database();
		const res = await db.collection('movies')
			.orderBy('movieId', 'desc')
			.where({
				nm: new RegExp(keywords, 'i')
			})
			.skip(page.value * 10)
			.limit(10)
			.get();

		if (res.result && res.result.data.length > 0) {
			movieList.value = [...movieList.value, ...res.result.data];
			page.value += 1; // 增加页码
		} else {
			if (page.value === 0) {
				uni.showToast({
					title: '未找到匹配的记录',
					icon: 'none'
				});
			}
		}
		loadModal.value = false;
	}
	const goDetail = (id) => {
		uni.navigateTo({
			url: '/pages/playPage/playPage?id=' + id
		})
	}
	// 触底
	onReachBottom(() => {
		getList()
	})
</script>
<template>
	<view class="">
		<view class="cu-load load-modal" v-if="loadModal">
			<view class="cuIcon-search text-drab"></view>
			<view class="gray-text">加载中...</view>
		</view>
		<scroll-view v-else class="scroll-view" scroll-y>
			<view v-if="movieList.length > 0">
				<view class="movie-list-item flex bg-white padding" style="border-bottom:1rpx solid #5a7c4d;" v-for="item in movieList"
					:key="item._id" @tap="goDetail(item.movieId)">
					<image style="width:160rpx;height:240rpx;" :src="item.image_thumb"></image>
					<view class="movie-list-item-info margin-left">
						<view class="nm info-item">{{item.nm ? item.nm : '未知'}}</view>
						<view class="dir info-item">导演：{{item.dir ? item.dir : '未知'}}</view>
						<view class="actor info-item">演员：{{item.actors ? item.actors : '未知'}}</view>
						<view class="categorys info-item">类型：{{item.categorys ? item.categorys : '未知'}}</view>
						<view class="intro info-item">介绍：{{item.intro ? item.intro : '未知'}}</view>
					</view>
				</view>
			</view>
			<view v-else>
				<image 
				  src="/static/none.png" 
				  mode="widthFix" 
				  style="top:50rpx;left:50%;transform: translateX(-50%);width: 300rpx;"
				></image>
			</view>
		</scroll-view>
	</view>
</template>
<style lang="scss">
	.scroll-view {
		flex: 1;
		height: 100%;
	}

	.movie-list-item {
		height: 100%;
		position: relative;
		color: #D0D0D0;
		font-size: 24rpx;
	}

	.movie-list-item-info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 500rpx;
	}

	.info-item {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		color: #9e9e9e;
		-webkit-box-orient: vertical;
	}

	.nm {
		-webkit-line-clamp: 1;
		font-size: 32rpx;
		color: #000;
	}

	.dir {
		-webkit-line-clamp: 1;
	}

	.actor {
		-webkit-line-clamp: 1;
	}

	.categorys {
		-webkit-line-clamp: 1;
	}

	.intro {
		-webkit-line-clamp: 2;
	}
</style>